<template>
  <div style="display: flex; justify-content: flex-end">
    <template v-if="showTotal">
      <el-pagination :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :layout="layout" :total="total || 0" :pager-count="pagerCount" :disabled="disable" @size-change="handleSizeChange" @current-change="handleCurrentChange" @prev-click="prevClick" @next-click="nextClick"></el-pagination>
    </template>

    <template v-else>
      <el-link :disabled="currentPage === 1 || disable" :underline="false" class="mr10" @click="prevClick">上一页</el-link>
      <el-link :disabled="limitNext < pageSize || disable" :underline="false" class="mr10" @click="nextClick">下一页</el-link>
      <el-button size="mini" @click="getTotal" :loading="loading">查询总数</el-button>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  total: { type: [String, Number], default: 0 },
  currentPage: { type: [String, Number], default: 1 },
  limitNext: { type: Number, default: 20 },
  pageSize: { type: [String, Number], default: 20 },
  pageSizes: { type: Array, default: ['20', '50', '100'] },
  layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' },
  pagerCount: { type: [String, Number], default: 7 },
  disable: { type: Boolean, default: false },
  showTotal: { type: Boolean, default: true }
})

const emit = defineEmits([
  'handle-size-change',
  'handle-current-change',
  'prev-click',
  'next-click',
  'get-total',
  'change-size'
])

const handleSizeChange = size => {
  emit('handle-size-change', size)
}
const handleCurrentChange = page => {
  emit('handle-current-change', page)
}
const prevClick = page => {
  emit('prev-click', page)
}
const nextClick = page => {
  emit('next-click', page)
}
</script>

<style>

</style>